<template>
  <div class="about">
    <div class="nav" :style="{'opacity':opacity}">About</div>
    <router-link to="/films">films</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      opacity:0
    }
  },
  // beforeCreate() {
  //   console.log('beforeCreate');
  // },
  // created() {
  //   console.log('created');
  // },
  // beforeMount() {
  //   console.log('beforeMount');
  // },
  mounted() {
    // console.log('mounted');
    window.addEventListener('scroll',this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll',this.handleScroll)
  },
  methods: {
    handleScroll(){
      var scrollTop = document.documentElement.scrollTop
      var opacity = scrollTop/300;
      if(opacity>1){
        opacity = 1
      }
      this.opacity = opacity
      console.log(this.opacity);
    }
  },
}
</script>

<style scoped>
.nav{
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0;
  background-color: pink;
}
</style>
